<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<image class="myUser_bg" src="/static/images/orderTopBj_action.png">
		</image>
		<myHeard :search="search" :ScrollTopColor="'#f0414d'" :title="title" :isTrue="isTrue" :mystate="2"
			@goPath="goBack"></myHeard>

		<view class="myPages__stateMain" v-if="particulars">
			<!-- 售后状态-----等待商家同意 -->
			<view class="myPages__stateBox"
				v-if="(particulars.orderService.checkStatus==10&&particulars.orderService.serviceStatus==20)">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle myPages__stateBoxTopTitle--tk">等待商家同意</span>
					<image class="myPages__stateBoxTopImg" src="/static/images/rightSign_action.png"></image>
				</view>
				<view class="myPages__stateBoxBottom myPages__stateBoxTopImg--tk">订单申请退款中</view>
			</view>
			<!-- 售后状态-----申请退款中 -->
			<view class="myPages__stateBox"
				v-else-if="(particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus==30&&particulars.orderService.orderRefund.refundStatus==20)||(particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus==30&&particulars.orderService.orderRefund.refundStatus==10)">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle myPages__stateBoxTopTitle--tk">申请退款中</span>
					<image class="myPages__stateBoxTopImg" src="/static/images/rightSign_action.png"></image>
				</view>
				<view class="myPages__stateBoxBottom myPages__stateBoxTopImg--tk">订单正在处理售后问题</view>
			</view>
			<!-- -->
			<!-- 售后状态-----商品待寄回 -->
			<view class="myPages__stateBox"
				v-else-if="particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus==20&&particulars.orderService.serviceType==10&&particulars.orderService.deliveryStatus==10">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle myPages__stateBoxTopTitle--tk">商品待寄回</span>
					<image class="myPages__stateBoxTopImg" src="/static/images/rightSign_action.png"></image>
				</view>
				<view class="myPages__stateBoxBottom myPages__stateBoxTopImg--tk">商家已同意退款</view>
			</view>
			<!-- 售后状态-----已撤销申请 -->
			<view class="myPages__stateBox" v-else-if="particulars.orderService.serviceStatus==10">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle myPages__stateBoxTopTitle--tk">已撤销</span>
					<image class="myPages__stateBoxTopImg" src="/static/images/rightSign_action.png"></image>
				</view>
				<view class="myPages__stateBoxBottom myPages__stateBoxTopImg--tk">已撤销申请</view>
			</view>
			<!--  -->
			<!-- 售后状态-----等待商家收货 -->
			<view class="myPages__stateBox"
				v-else-if="particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus==20&&particulars.orderService.serviceType==10&&particulars.orderService.deliveryStatus==30&&particulars.orderService.receiptStatus==10">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle myPages__stateBoxTopTitle--tk">等待商家收货</span>
					<image class="myPages__stateBoxTopImg" src="/static/images/rightSign_action.png"></image>
				</view>
				<view class="myPages__stateBoxBottom myPages__stateBoxTopImg--tk">商家已同意退款</view>
			</view>
			<!-- 售后状态-----退款失败 -->
			<view class="myPages__stateBox"
				v-else-if="particulars.orderService.checkStatus==30&&particulars.orderService.serviceStatus==30">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle myPages__stateBoxTopTitle--tk">已拒绝</span>
					<image class="myPages__stateBoxTopImg" src="/static/images/rightSign_action.png"></image>
				</view>
				<view class="myPages__stateBoxBottom myPages__stateBoxTopImg--tk">商家已拒绝了该售后</view>
			</view>
			<!-- 售后状态-----退款成功 -->

			<view class="myPages__stateBox" v-else-if="particulars.orderService.orderRefund.refundStatus==40">
				<view class="myPages__stateBoxTop">
					<span class="myPages__stateBoxTopTitle myPages__stateBoxTopTitle--tk">已退款</span>
					<image class="myPages__stateBoxTopImg" src="/static/images/rightSign_action.png"></image>
				</view>
				<view class="myPages__stateBoxBottom myPages__stateBoxTopImg--tk">退款成功</view>
			</view>





			<view class="myPages__stateBoxMain">
				<!-- 快递区 -->

				<view class="myPages__logistics">
					<image class="myPages__logisticsImg" src="/static/images/logistics.png"></image>
					<view class="myPages__logisticsMain">
						<p class="myPages__logisticsMainTop">
							{{particulars.orderAddress.province}}{{particulars.orderAddress.city}}{{particulars.orderAddress.region}}{{particulars.orderAddress.detail}}
						</p>
						<view class="myPages__logisticsMainBottom">
							<span>{{particulars.orderAddress.name}}</span>
							<span>{{particulars.orderAddress.phone}}</span>
						</view>
					</view>
					<!-- <image class="myPages__logisticsMainEnd" src="/static/images/rightSign.png"></image> -->
				</view>

				<!-- 寄回商品 -->
				<view class="myPages__sendback" @click="goPages"
					v-if="(particulars.orderService.deliveryStatus==30&&particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus==30&&particulars.orderService.orderRefund.refundStatus==40)||(particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus==20&&particulars.orderService.serviceType==10&&particulars.orderService.deliveryStatus==10)||(particulars.orderService.deliveryStatus==30&&particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus==20&&particulars.orderService.serviceType==10&&particulars.orderService.deliveryStatus==30&&particulars.orderService.receiptStatus==10)">

					<view class="myPages__sendbackTopBox">
						<view class="myPages__sendbackTopBoxLefts">
							<image src="/static/images/wuliuIconBox.png"></image>
							<span>寄回商品</span>
						</view>
						<view class="myPages__sendbackTopBoxRihtBox">
							<span>{{particulars.orderService.deliveryStatus==10?'填写物流单号':particulars.orderService.deliveryStatus==30?'已填写':''}}</span>
							<image src="/static/images/rightSign.png"></image>
						</view>
					</view>
					<view class="myPages__sendbackBottomBox">
						<view class="myPages__sendbackBottomBoxItems">
							<view v-if="particulars.orderService.deliveryStatus==10"
								class="myPages__sendbackBottomBoxItemsTopBox">
								<view class="myPages__sendbackBottomBoxItemsTopBoxs">
									<view class="myPages__sendbackBottomBoxItemsTopAmallBox"></view>
								</view>
								<view class="myPages__sendbackBottomBoxItemsTopBoxHeng"></view>
							</view>
							<view v-if="particulars.orderService.deliveryStatus==30"
								class="myPages__sendbackBottomBoxItemsTopBox">
								<image src="/static/images/catIcon_active.png"></image>
								<view
									class="myPages__sendbackBottomBoxItemsTopBoxHeng myPages__sendbackBottomBoxItemsTopBoxHeng--red">
								</view>
							</view>
							<view class="myPages__sendbackBottomBoxItemsBottomBox">
								寄回商品
							</view>
						</view>
						<view class="myPages__sendbackBottomBoxItems">
							<view
								v-if="particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus!=10&&particulars.orderService.serviceType==10&&particulars.orderService.deliveryStatus==30&&particulars.orderService.receiptStatus==30&&particulars.orderService.orderRefund.refundStatus!=10"
								class="myPages__sendbackBottomBoxItemsTopBox">
								<image src="/static/images/catIcon_active.png"></image>
								<view
									class="myPages__sendbackBottomBoxItemsTopBoxHeng myPages__sendbackBottomBoxItemsTopBoxHeng--red">
								</view>
							</view>
							<view v-else class="myPages__sendbackBottomBoxItemsTopBox">
								<view class="myPages__sendbackBottomBoxItemsTopBoxs">
									<view class="myPages__sendbackBottomBoxItemsTopAmallBox"></view>
								</view>
								<view class="myPages__sendbackBottomBoxItemsTopBoxHeng"></view>
							</view>
							<view class="myPages__sendbackBottomBoxItemsBottomBox">
								拼表多收货
							</view>
						</view>
						<view class="myPages__sendbackBottomBoxItems">
							<view
								v-if="particulars.orderService.checkStatus==20&&particulars.orderService.serviceStatus!=10&&particulars.orderService.serviceType==10&&particulars.orderService.deliveryStatus==30&&particulars.orderService.receiptStatus==30&&particulars.orderService.orderRefund.refundStatus!=10"
								class="myPages__sendbackBottomBoxItemsTopBox">
								<image src="/static/images/catIcon_active.png"></image>
							</view>
							<view v-else class="myPages__sendbackBottomBoxItemsTopBox">
								<view class="myPages__sendbackBottomBoxItemsTopBoxs">
									<view class="myPages__sendbackBottomBoxItemsTopAmallBox"></view>
								</view>
							</view>

							<view class="myPages__sendbackBottomBoxItemsBottomBox">
								查验退款
							</view>
						</view>
					</view>
				</view>

				<!-- 订单区 -->
				<view class="myPages__mainForm">
					<view class="myPages__mainFormHaerd">
						<view class="myPages__mainFormHaerdLeft">
							<image class="myPages__mainFormHaerdLeftImg" src="/static/images/titleLogo.png"></image>
							<span>| 新潮手表新鲜式</span>
						</view>
						<image @click="serviceShow = true" class="myPages__mainFormHaerdRightImg"
							src="/static/images/headset.png"></image>
					</view>
					<view class="myPages__mainFormMain">
						<view v-for="(item,index) in particulars.orderProductList" :key="index">
							<view class="myPages__mainFormMainItem" v-if="item.productType==10">
								<view class="myPages__mainFormMainItemName">{{item.productName}}</view>
								<view class="myPages__mainFormMainItemBody">
									<view class="myPages__mainFormMainItemBodyTop">
										<view @click.stop="ff_previewImage(item.productImg)"
											class="myPages__mainFormMainItemBodyTopImgBox">
											<image class="myPages__mainFormMainItemBodyTopImgs myPages__mainFormMainItemBodyTopImgss" :src="item.productImg">
											</image>
										</view>
										<view class="myPages__mainFormMainItemBodyBottomx">
											<p>{{item.productSku}}</p>
											<span>¥{{item.price}}</span>
										</view>
									</view>
									<view class="myPages__mainFormMainItemBodyBottom">
										<view class="myPages__mainFormMainItemBodyBottomImgBox">
											<view class="myPages__mainFormMainItemBodyTopImgBoxs"
												@click.stop="ff_previewImages(item.orderGoodsList,twoIndex)"
												v-for="(twoItem,twoIndex) in item.orderGoodsList" :key="twoIndex">
												<image class="myPages__mainFormMainItemBodyTopImg"
													:src="twoItem.coverImg">
												</image>
											</view>

										</view>
										<view class="myHandbag__mainItemCenBoxJjieMains">
											<view class="myHandbag__mainItemCenBoxJjieMainNum">
												x<span>{{item.productNum}}</span>件</view>
										</view>


									</view>
								</view>

							</view>
						</view>
						<view  v-if="partOrderProductList.length">
							<view class="myPages__mainFormMainItem">
								<view class="myPages__mainFormMainItemName">手表配件</view>
								<view class="myPages__mainFormMainItemBody">
									<view class="myPages__mainFormMainItemBodyTop myPages__mymainFormMainItemBodyTop" v-for="(item,index) in partOrderProductList" :key="index">
										<view @click.stop="ff_previewImage(item.productImg)"
											class="myPages__mainFormMainItemBodyTopImgBox">
											<image class="myPages__mainFormMainItemBodyTopImgs myPages__mymainFormMainItemBodyTopImgs" :src="item.productImg">
											</image>
										</view>
										<view class="myPages__mainFormMainItemBodyBottomx">
											<p>{{item.productSku}}</p>
											<span>¥{{item.price}}</span>
										</view>
										<view class="myHandbag__mainItemCenBoxJjieMainNuxsm">
											x<span>{{item.productNum}}</span></view>
									</view>
									
								</view>
						
							</view>
						</view>
						<view class="myPages__mainFormMainButtom">
							<view class="myPages__mainFormMainButtomText">共{{particulars.totalNum}}件，合计应付:</view>
							<view class="myPages__mainFormMainButtomBox">
								<span>￥</span>
								<span>{{particulars.totalPrice}}</span>
							</view>
						</view>
					</view>


				</view>
				<!-- 备注与支付方式-->
				<!-- 订单状态-----待收货----正在安排发货…----待评价- -->
				<view class="myPages__remarkBox" v-if="particulars.payStatus==20&&particulars.orderStatus==20">
					<view class="myPages__remarkBoxItems">
						<view class="myPages__remarkLeftz">
							备注信息
						</view>
						<view class="myPages__remarkRight">
							{{particulars.buyerRemark?particulars.buyerRemark:'无'}}
						</view>
					</view>
					<view class="myPages__remarkBoxItems">
						<view class="myPages__remarkLeftz">
							支付方式
						</view>
						<image
							:src="particulars.payType == 20 ? '/static/images/zfIcon.png' : '/static/images/yeIcon.png'">
						</image>
					</view>
				</view>

				<!-- 订单状态-----待付款 -->
				<view class="myPages__remarkBoxs" v-if="particulars.payStatus==10&&particulars.orderStatus==20"
					@click="isRemark = true">
					<view class="myPages__remarkLeft">
						<image class="myPages__remarkLeftIcon" src="/static/images/remarkIcon.png"></image>
						<span>备注信息</span>
					</view>
					<view class="myPages__remarkRight">
						<span>{{textareaValue ? textareaValue : '请尽快发货'}}</span>
						<image class="myPages__remarkRightIcon" src="/static/images/rightSign.png"></image>
					</view>
				</view>
				<!-- 支付区 -->
				<!-- 订单状态-----待付款 -->
				<view class="myPages__paymentBox" v-if="particulars.payStatus==10&&particulars.orderStatus==20">
					<view class="myPages__paymentBoxItem" @click.stop="tagerPaymentIndex(index)"
						v-for="(item,index) in paymentList" :key="index">
						<view class="myPages__paymentLeft">
							<image class="myPages__paymentLeftIcon" :src="item.path"></image>
							<view class="myPages__paymentLeftText">
								<span>{{item.name}}</span>
								<span v-if="user.walletMoney && index==1">:剩余¥{{user.walletMoney}}</span>
							</view>
						</view>
						<image class="myPages__paymentLRight"
							:src="paymentIndex==index ? '/static/images/catIcon_active.png' : '/static/images/catIcon.png'">
						</image>
					</view>
				</view>

				<!-- 订单时间与编号-->
				<!-- 订单状态-----安排发货 -->
				<!--  -->
				<view class="myPages__remarkBox" v-if="particulars">
					<view class="myPages__remarkBoxItems bianhao" v-if="particulars.createTime">
						<view class="myPages__remarkLeft">
							订单时间
						</view>
						<view class="myPages__remarkRight">
							{{particulars.createTime | ff_createTime}}
						</view>
					</view>
					<view class="myPages__remarkBoxItems">
						<view class="myPages__remarkLeft">
							订单编号
						</view>
						<view class="myPages__remarkRight">
							{{particulars.orderNo}}
						</view>
					</view>
					<view class="myPages__remarkBoxItems" v-if="particulars.receiptTime">
						<view class="myPages__remarkLeft">
							收货时间
						</view>
						<view class="myPages__remarkRight">
							{{particulars.receiptTime | ff_createTime}}
						</view>
					</view>
					<view class="myPages__remarkBoxItems"
						v-if="particulars&& particulars.orderService.orderRefund.refundStatus==40">
						<view class="myPages__remarkLeft">
							退款时间
						</view>
						<view class="myPages__remarkRight">
							{{particulars.orderService.orderRefund.refundTime | ff_createTime}}
						</view>
					</view>
				</view>


			</view>

			<!--  -->
			<!-- 订单状态-----退款成功 -->
			<view class="myPages__remarkButtom"
				v-if="(particulars.orderService.checkStatus==30&&particulars.orderService.serviceStatus==30)||(particulars.orderService.serviceStatus==10)||(particulars.orderService.orderRefund.refundStatus==30)||(particulars.orderService.orderRefund.refundStatus==40)">
				<view class="myPages__remarkBoxssZF" @click.stop="goBackRemark">
					重新购买
				</view>
			</view>
			<!-- 订单状态------>
			<view @click.stop="revocation" class="myPages__remarkButtom myPages__remarkButtomTk" v-else>
				<view class="myPages__remarkBoxss myPages__remarkBoxssTk">
					撤销申请
				</view>
			</view>


		</view>
		<!-- 撤销申请 -->
		<u-overlay :show="show" @click="show = false">
			<view class="warp" @click.stop="">
				<view class="warpText">确认撤销售后申请？</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="show = false">取消</span>
					<span class="warpButtomYes" @click.stop="ff_yes">确定</span>
				</view>
			</view>
		</u-overlay>
		<!-- 撤销成功 -->
		<u-overlay :opacity="0.01" :show="isShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>撤销成功</span>
			</view>
		</u-overlay>
		<!-- 申请售后 -->
		<u-overlay :show="saleShow" @click="saleShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">申请售后</view>
				<image @click.stop="saleShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<view @click.stop="goAfterSaleDetails({orderProductId:item,orderId:particulars.orderId})"
						v-for="(item,index) in particulars.orderProductList" :key="index">
						<view class="saleBox__MainItem" v-if="item.serviceStatus==0">
							<span>{{item.productName}}</span>
							<span>(数量:{{item.productNum}}件）</span>
						</view>

					</view>
					<view class="saleBox__MainItem"
						@click.stop="goAfterSaleDetails({orderProductId:'allIn',orderId:particulars.orderId})">申请全部
					</view>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="wliuShow" @click="wliuShow = false">
			<view class="saleBox saleBoxBody" @click.stop="">
				<view class="saleBox__Heard">订单跟踪</view>
				<image @click.stop="wliuShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__MainBody" v-if="particulars.orderExpress.kuaiDi100.data">
					<view
						:class="index!=particulars.orderExpress.kuaiDi100.data.length-1 ? 'saleBox__BiaoZhiItem' : 'saleBox__BiaoZhiItem saleBox__BiaoZhiItem--black'"
						v-for="(item,index) in particulars.orderExpress.kuaiDi100.data" :key="index">
						<view class="saleBox__BiaoZhiItemTitleBox">
							<span
								:class="index!=particulars.orderExpress.kuaiDi100.data.length-1 ? 'saleBox__BiaoZhiItemTitleBoxYuan' : 'saleBox__BiaoZhiItemTitleBoxYuan saleBox__BiaoZhiItemTitleBoxYuan--red'"></span>
							<span v-if="index!=particulars.orderExpress.kuaiDi100.data.length-1"
								class="saleBox__BiaoZhiItemTitleBoxGan"></span>
						</view>
						<view class="saleBox__BiaoZhiItemContext">{{item.context}}</view>
						<view class="saleBox__BiaoZhiItemFtime">{{item.ftime}}</view>
					</view>
				</view>
				<view class="saleBox__MainBodyxxx" v-else>
					{{particulars.orderExpress.kuaiDi100.message}}
				</view>
			</view>
		</u-overlay>
		<!-- 联系客服 -->
		<u-overlay :show="serviceShow" @click="serviceShow = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">联系客服</view>
				<image @click.stop="serviceShow = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<view class="saleBox__MainItem saleBox__MainItem--service"
						@click.stop="callSeller(particulars.serverPhone)">
						<span
							class="serviceIphone">客服电话：{{particulars.serverPhone ? particulars.serverPhone : '暂无客服'}}</span>
						<image class="serviceIphoneImg" src="/static/images/serviceIcons.png"></image>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- 备注信息 -->
		<u-overlay :show="isRemark" @click="isRemark = false">
			<view class="saleBox" @click.stop="">
				<view class="saleBox__Heard">备注信息</view>
				<image @click.stop="isRemark = false" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
				</image>
				<view class="saleBox__Main">
					<textarea :show-confirm-bar="false" @click.stop="" class="saleBox__MainText" v-model="textareaValue"
						placeholder="请输入要备注的内容…"></textarea>
					<view @click.stop="isRemark = false"
						:class="textareaValue.length == 0 ? 'saleBox__MainItem saleBox__MainItem--wthid' : 'saleBox__MainItem saleBox__MainItem--red'">
						确定备注</view>
				</view>
			</view>
		</u-overlay>
	
	</view>
</template>
<script>
	import myHeard from '@/components/myHeard/index.vue'
	let that = null;
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				orderExpress: {},
				partOrderProductList:[],
				title: '售后详情',
				isShowDui: false,
				serviceNo: '',
				ScrollTopColor: '',
				textareaValue: '',
				paymentIndex: 0,
				wliuShow: false,
				show: false,
				saleShow: false,
				serviceShow: false,
				isRemark: false,
				sendObj: null,
				particulars: null,
				isScrollTop: true,
				isTrue: false,
				ispayStatusAll: true,
				closeTime: '',
				orderNo: '',
				addressId: '',
				paymentList: [{
						path: '/static/images/zfIcon.png',
						name: '微信支付',
						num: null
					},
					{
						path: '/static/images/yeIcon.png',
						name: '余额支付',
						num: 795.12
					}
				]
			}
		},
		onPageScroll(e) {
			// isTrue
			if (e.scrollTop > 10) {
				this.isTrue = true;
			} else {
				this.isTrue = false;
			}
		},
		onLoad(oprtion) {
			// console.log('user-->',this.user)
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif

			this.serviceNo = oprtion.serviceNo
			// this.initOrderWxCreate();

			that = this;

		},
		onShow(oprtion) {
			this.initOrderWxCreate();
			if (oprtion) {
				let nowparticulars = JSON.parse(JSON.stringify(this.particulars))
				nowparticulars.orderAddress = oprtion;
				this.particulars = JSON.parse(JSON.stringify(nowparticulars))
			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			user() {
				return this.$store.state.user;
			}

		},
		filters: {
			ff_createTime(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				function formatNumber(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(
						formatNumber)
					.join(':')
			}
		},
		methods: {
			ff_previewImages(myImgs, index = 0) {
				let imgs = [];
				myImgs.forEach(item => {
					imgs.push(item.coverImg)
				})
				uni.previewImage({
					urls: imgs,
					current: index
				})
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			ff_remark() {
				if (this.paymentIndex == 1 && this.particulars.totalPrice > this.user.walletMoney) {
					uni.showToast({
						icon: 'none',
						title: '余额不足',
						mask: true
					})
					return true;
				}
				return false;
			},
			callSeller(phone) {
				if (!phone) {

					uni.showToast({
						icon: 'none',
						title: '暂无客服'
					});
					return
				}
				uni.makePhoneCall({
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
				});
				// this.serviceShow = false;
			},
			goAfterSaleDetails({
				orderProductId,
				orderId
			}) {
				let sales = {};
				let orderProductIds = [];
				if (orderProductId == 'allIn') {
					this.particulars.orderProductList.forEach(item => {
						if (item.serviceStatus == 0) {
							orderProductIds.push(item)
						}

					})
					sales = {
						orderId,
						orderProductIds
					}
				} else {
					orderProductIds = [orderProductId];
					sales = {
						orderId,
						orderProductIds
					}
				}
				this.saleShow = false;
				uni.navigateTo({
					url: `/package/applySales/index?sales=${JSON.stringify(sales)}`
				})
			},
			initOrderWxCreate() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.serviceReasonWxDetail({
					serviceNo: this.serviceNo
				}).then(res => {
					// console.log('res--->',res)

					if (res.code == 200) {
						this.orderNo = res.data.orderNo;
						this.particulars = res.data;
						this.partOrderProductList = [];
						this.particulars.orderProductList.forEach(item=>{
							// debugger
							if(item.productType==20){
								this.partOrderProductList.push(item)
							}
						})
						console.log('partOrderProductList---->',this.partOrderProductList)

						this.ispayStatusAll = false;
						for (let i = 0; i < this.particulars.orderProductList.length; i++) {
							let item = this.particulars.orderProductList[i];
							if (item.serviceStatus == 0) {
								this.ispayStatusAll = true;
								break
							}
						}

						this.particulars.orderProductList.forEach(item => {
							console.log('item--->', item.serviceStatus)
						})

						this.textareaValue = this.particulars.buyerRemark;
						if (this.particulars.payStatus == 10 && this.particulars.orderStatus == 20 && this
							.particulars.payStatus == 10) {
							// console.log('this.particulars.closeTime--->',)
							this.myTime(this.particulars.closeTime);

						}

					}
				})

			},
			myTime(closeTime) {
				closeTime = new Date(closeTime).getTime();

				let nowCloseTime = new Date().getTime();
				let chaCloseTime = closeTime - nowCloseTime;
				let time = setInterval(() => {
					chaCloseTime = chaCloseTime - 1000;
					let hour = Math.floor(chaCloseTime / 3600000) >= 10 ? Math.floor(chaCloseTime /
							3600000) :
						`0${Math.floor(chaCloseTime/3600000)}`
					let minute = Math.floor((chaCloseTime - (hour * 3600000)) / 60000) >= 10 ? Math.floor((
							chaCloseTime - (hour * 3600000)) / 60000) :
						`0${Math.floor((chaCloseTime - (hour*3600000))/60000)}`
					let second = Math.floor((chaCloseTime - hour * 3600000 - minute * 60000) / 1000) >=
						10 ? Math
						.floor((chaCloseTime - hour * 3600000 - minute * 60000) / 1000) :
						`0${Math.floor((chaCloseTime - hour*3600000 - minute*60000)/1000 )}`
					this.closeTime = `${hour}:${minute}:${second}`
					if (hour == '00' && minute == '00' && second == '00') {
						clearInterval(time)
					}

				}, 1000);
			},
			goBackRemark() {
				let req = {
					orderNo: this.orderNo,
					buyType: 3
				}
				uni.redirectTo({
					url: `/package/orderForm/index?backObj=${JSON.stringify(req)}`
				})
			},
			sendRemark() {

				let buyerRemark = this.textareaValue;
				let payType = this.paymentIndex == 0 ? 20 : 30;
				let isRemark = this.ff_remark();
				if (isRemark) return;


				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderWxPay({
					buyerRemark,
					orderNo: this.orderNo,
					payType: payType == 20 ? 'WECHAT' : 'WALLET'
				}).then(twoItem => {
					let {
						result
					} = twoItem.data
					if (twoItem.data.payType == 'WECHAT') {
						// 微信支付
						if (twoItem.data.needPay) {

							uni.requestPayment({
								nonceStr: result.nonceStr,
								package: result.packageValue,
								paySign: result.paySign,
								timeStamp: result.timeStamp,
								signType: result.signType,
								success: threeRes => {
									that.orderWxPayQuery(twoItem.data.orderNo);
								},
								fail: threeRes => {
									that.orderWxPayQuery(twoItem.data.orderNo);
								}
							});


						} else {
							that.orderWxPayQuery(twoItem.data.orderNo);
						};
					} else {
						// 余额支付
						if (twoItem.data.needPay) {


							that.orderWxPayQuery(twoItem.data.orderNo);

						} else {
							that.orderWxPayQuery(twoItem.data.orderNo);
						};
					}
				})

			},
			// 查询支付状态
			orderWxPayQuery(orderNo) {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.orderWxPayQuery({
					orderNo
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'none',
							title: res.data.isPay ? '支付成功' : '支付失败',
							mask: true
						})
						this.initOrderWxCreate();
					};
				});
			},

			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},
			ff_yes() {
				this.$api.serviceReasonWxCancel({
					serviceNo: this.serviceNo
				}).then(res => {
					if (res.code == 200) {
						
						this.show = false;
						this.isShowDui= true;
						setTimeout(()=>{
							this.isShowDui= false;
							this.initOrderWxCreate();
						},1000)
						
					}
				})
			},
			goPages() {

				if (this.particulars.orderService.deliveryStatus == 30) {
					uni.showToast({
						icon: "none",
						title: '已填写',
						mask: true
					});
					return;
				}
				let sales = {
					orderProductIds: this.particulars.orderProductList,
					orderService: this.particulars.orderService
				}
				uni.navigateTo({
					url: `/package/logisticsSales/index?sales=${JSON.stringify(sales)}`
				})
			},
			tagerPaymentIndex(index) {
				this.paymentIndex = index;
			},
			revocation() {
				this.show = true;
			},
			ff_saleShow() {
				this.saleShow = true;
			},
			accomplish() {
				this.$api.orderExpressWxReceipt({
					orderNo: this.orderNo,
					orderExpressId: this.particulars.orderExpress.orderExpressId
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							mask: true
						})
						this.initOrderWxCreate();
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		width: 100%;
		min-height: 100vh;
		background: #f6f7fb;

		box-sizing: border-box;

		.myUser_bg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.myPages__stateMain {
			z-index: 99;
			position: relative;
			width: 100%;


		}

		.myPages__remarkButtomTk {}

		.myPages__remarkBoxss {
			color: #717178 !important;
			background-color: #ebebf0 !important;
		}

		.serviceIphoneImg {
			width: 58rpx;
			height: 58rpx;
		}

		.serviceIphone {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
		}

		.saleBox__MainItem--service {
			justify-content: space-between !important;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}

		.saleBoxBody {
			height: 900rpx;
		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}


		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #7b7d8d;
			}

		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #f44b5b;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.saleBox__MainBody {
			height: 800rpx;
			overflow: scroll;
		}

		.saleBox__MainBodyxxx {
			text-align: center;
			font-size: 30rpx;
			color: #B0B1BB;
			margin-top: 200rpx;
		}

		.saleBox__BiaoZhiItem {
			display: flex;
			height: 105rpx;
			margin: 20rpx 0;
			font-size: 26rpx;
			color: #B0B1BB;
		}

		.saleBox__BiaoZhiItem--black {
			color: #000;
		}

		.saleBox__BiaoZhiItemTitleBox {
			flex: 0 0 30rpx;
			position: relative;
		}

		.saleBox__BiaoZhiItemTitleBoxYuan {
			display: inline-block;
			width: 20rpx;
			height: 20rpx;
			background-color: #FDE1E3;
			position: absolute;
			top: 50%;
			border-radius: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.saleBox__BiaoZhiItemTitleBoxYuan--red {
			background-color: #F0414D !important;
		}

		.saleBox__BiaoZhiItemTitleBoxGan {
			display: inline-block;
			width: 6rpx;
			height: 113rpx;
			background-color: #FDE1E3;
			position: absolute;
			top: 109%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.saleBox__BiaoZhiItemContext {
			flex: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; //保留多少行
			overflow: hidden;

		}

		.saleBox__BiaoZhiItemFtime {
			flex: 0 0 146rpx;
		}


		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}
		.overlayBox {
			width: 202rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}
		
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
		
			}
		}
		

		.warp {
			width: 70%;
			height: 210rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}

		.warpText {
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			width: 100%;
			padding: 40rpx 0;
		}

		.warpButtom {
			display: flex;

			span {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #F0414D;
				border-top: 3rpx solid #F0F2F8;
				box-sizing: border-box;
			}

			span:nth-child(1) {
				border-right: 3rpx solid #F0F2F8;
				color: #B0B1BB;
			}
		}

		.myPages__logistics {
			position: relative;
			width: 686rpx;
			height: 168rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 40rpx;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			overflow: hidden;

			&::after {
				content: '';
				bottom: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 4rpx;
				background-image: repeating-linear-gradient(125deg, #C2DCFF 0, #C2DCFF 20rpx, #F0414D 20rpx, #F0414D 40rpx);
			}
		}

		.myPages__logisticsImg {
			width: 72rpx;
			height: 104rpx;
			flex: 0 0 72rpx;
		}

		.myPages__logisticsMain {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin: 0 32rpx;
			width: 416rpx;

		}

		.myPages__logisticsMainTop {
			height: 44rpx;
			font-size: 32rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 44rpx;
			color: #2B2B33;
			opacity: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}

		.myPages__logisticsMainBottom {
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 34rpx;
				color: #7B7D8D;
				opacity: 1;
			}

			span:nth-child(2) {
				margin-left: 50rpx;
			}
		}

		.myPages__sendback {
			width: 686rpx;
			height: 224rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.myPages__sendbackTopBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 3rpx solid #F0F2F8;
			padding-bottom: 25rpx;
		}

		.myPages__sendbackTopBoxLefts {
			display: flex;
			align-items: center;
			flex: 0 0 165rpx;

			image {
				width: 48rpx;
				height: 48rpx;

			}

			span {
				height: 48rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 48rpx;
				color: #2B2B33;
			}
		}

		.myPages__sendbackTopBoxRihtBox {
			display: flex;
			align-items: center;
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			image {
				width: 48rpx;
				height: 48rpx;
				flex: 0 0 48rpx;
			}

			span {
				height: 48rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 48rpx;
				color: #B0B1BB;
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right;
			}
		}

		.myPages__sendbackBottomBox {
			display: flex;
		}

		.myPages__sendbackBottomBoxItems {
			flex: 1;
			text-align: center;
			position: relative;
			padding-top: 20rpx;

		}

		.myPages__sendbackBottomBoxItemsTopBox {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			position: relative;
			background: #f0414d;
			margin: auto;
			box-sizing: border-box;

			image {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.myPages__sendbackBottomBoxItemsBottomBox {
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #7B7D8D;
			padding-top: 11rpx;
		}

		.myPages__sendbackBottomBoxItemsTopBoxs {


			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #fff4f4;
			box-sizing: border-box;
		}

		.myPages__sendbackBottomBoxItemsTopBoxHeng {
			height: 6rpx;
			width: 195rpx;
			background: #e1e3e6;
			opacity: 1;
			position: absolute;
			top: 41%;
			left: 99%;
		}

		.myPages__sendbackBottomBoxItemsTopBoxHeng--red {
			background: #f0414d !important;
		}

		.myPages__sendbackBottomBoxItemsTopBox {
			color: #000000;
		}


		.myPages__logisticsMainEnd {
			width: 56rpx;
			height: 56rpx;
		}

		.myHandbag__mainItemCenBoxJjieMain {
			height: 56rpx;
			display: flex;
			border-radius: 32rpx;
			background-color: #F7F8FC;

			.nowinput {
				display: inline-block;
				height: 56rpx !important;
				font-size: 30rpx !important;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 56rpx !important;
				padding: 0 12rpx;
				color: #2B2B33 !important;
				width: 45rpx;
				text-align: center;
			}
		}

		.myHandbag__mainItemCenBoxJjieMainImg01 {
			width: 56rpx;
			height: 56rpx;
		}

		.myHandbag__mainItemCenBoxJjieMainImg02 {
			width: 56rpx;
			height: 56rpx;
		}

		.myPages__mainFormHaerdLeftImg {
			width: 94rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}

		.myPages__mainFormHaerdRightImg {
			width: 40rpx;
			height: 40rpx;
		}

		.myPages__mainFormMainItemBodyTopImgs {
			width: 136rpx;
			height: 136rpx;
		}
		.myPages__mainFormMainItemBodyTopImgss{
			transform: scale(1.5);
		}
		.myPages__mymainFormMainItemBodyTopImgs{
			width: 92rpx !important;
			height: 92rpx !important;
		}

		.myPages__stateBoxMain {
			background: linear-gradient(180deg, #F7F8FC 0%, #F7F8FC 100%);
			box-shadow: 0px -12rpx 24rpx rgba(43, 43, 51, 0.04);
			opacity: 1;
			border-radius: 48rpx 48rpx 0px 0px;
			padding: 32rpx;
			box-sizing: border-box;
			padding-bottom: 140rpx;
		}

		.myPages__stateBox {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.myPages__stateBoxTop {
			display: flex;
			align-items: center;
		}

		.myPages__mainFormMainItemBodyTopImgs {
			width: 136rpx;
			height: 136rpx;
		}

		.myPages__mainFormMainItemBodyTopImg {
			width: 112rpx;
			height: 112rpx;
		}

		.myPages__stateBoxTopTitle {
			display: flex;
			height: 56rpx;
			font-size: 40rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 56rpx;
			color: #2B2B33;
		}

		.myPages__stateBoxTopTitle--tk {
			color: #FFFFFF !important;
		}

		.myPages__stateBoxTopImg {
			width: 36rpx;
			height: 36rpx;
		}

		.myPages__stateBoxTopImg--tk {
			color: #e6d2d2 !important
		}

		.myPages__stateBoxBottom {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #7B7D8D;
			margin-top: 4rpx;
		}

		.myPages__mainForm {
			width: 686rpx;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			margin: 20rpx 0;
		}

		.myPages__mainFormHaerd {
			display: flex;
			justify-content: space-between;
			height: 40rpx;
			align-items: center;

			span {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 34rpx;
				color: #B0B1BB;
				opacity: 1;
			}

		}

		.myPages__mainFormHaerdLeft {
			display: flex;
			height: 40rpx;
			align-items: center;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.myHandbag__mainItemCenBoxJjieMains {
			display: flex;
			border-radius: 32rpx;
			flex: 0 0 160rpx;
			width: 160rpx;
			text-align: center;
			height: 100%;
			align-items: flex-end;
			box-sizing: border-box;
			padding-bottom: 2rpx;

			.nowinput {
				display: inline-block;
				height: 56rpx !important;
				font-size: 30rpx !important;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 56rpx !important;
				padding: 0 12rpx;
				color: #2B2B33 !important;
				width: 45rpx;
				text-align: center;
			}
		}

		.myHandbag__mainItemCenBoxJjieMainNum {
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #7B7D8D;
			opacity: 1;
			text-align: center;
			width: 100%;

			span {
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}
		}


		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMain {
			padding-top: 20rpx;
		}

		.myPages__mainFormMainButtom {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.myPages__mainFormMainButtomText {
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			opacity: 1;
			margin-right: 10rpx;
		}

		.myPages__mainFormMainButtomBox {
			span {
				display: inline-block;
				font-family: 'DIN';
				font-weight: normal;
				color: #F0414D;
				font-size: 32rpx;
			}

			span:nth-child(1) {
				font-size: 24rpx;
			}
		}


		.myPages__mainFormMainItem {
			width: 100%;
			background-color: #F0F2F8;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

		}

		.myPages__mainFormMainItemName {
			height: 50rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 50rpx;
			color: #7B7D8D;
			opacity: 1;
			padding: 0 24rpx;
		}

		.myPages__mainFormMainItemBody {
			background: #FFFFFF;
			border: 2rpx solid #F0F2F8;
			opacity: 1;
			border-radius: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
		}
		.myHandbag__mainItemCenBoxJjieMainNuxsm{
			flex: 0 0 26rpx;
			width: 26rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #B0B1BB;
			transform: translateY(8rpx);
		}
		.myPages__mymainFormMainItemBodyTop{
			margin-bottom: 16rpx;
		}
		.myPages__mainFormMainItemBodyTop:last-child{
			margin-bottom: 0;
		}
		

		.myPages__mainFormMainItemBodyTop {
			display: flex;
			justify-content: space-between;
		}

		.myPages__mainFormMainItemBodyTopImgBox {
			width: 136rpx;
			flex: 0 0 136rpx;
			height: 136rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #f9f8fd;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.myPages__mainFormMainItemBodyBottomx {
			margin-left: 20rpx;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-around;

			p {
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				opacity: 1;
			}

			span {
				display: flex;
				height: 44rpx;
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 44rpx;
				color: #2B2B33;
			}
		}

		.myPages__mainFormMainItemBodyBottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;
			height: 110rpx;
		}

		.myPages__mainFormMainItemBodyBottomImgBox {
			flex: 1;
			margin-right: 34rpx;
			display: flex;
			justify-content: space-between;
		}

		.myPages__mainFormMainItemBodyTopImg {
			width: 92rpx;
			height: 92rpx;
		}

		.myPages__mainFormMainItemBodyTopImgBoxs {
			width: 112rpx;
			height: 112rpx;
			border-radius: 24rpx;
			overflow: hidden;
			background-color: #f7f8fc;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.myPages__remarkLeftIcon {
			height: 48rpx;
			width: 48rpx;
		}

		.myPages__remarkRightIcon {
			height: 40rpx;
			width: 40rpx;
			flex: 0 0 40rpx;
		}

		.myPages__remarkLeftz {
			span {
				display: inline-block;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
			}


			flex: 0 0 145rpx;
		}

		.myPages__remarkLeft {
			span {
				display: inline-block;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
			}

			display: flex;
			align-items: center;
			flex: 0 0 160rpx;
		}

		.myPages__remarkRight {
			span {
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			display: flex;
			align-items: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.myPages__paymentBox {
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			margin: 20rpx 0;

		}

		.myPages__paymentBoxItem {
			height: 48rpx;
			line-height: 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
		}

		.myPages__paymentLeftText {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			display: inline-block;

			span {
				margin-left: 10rpx;
			}

			span:nth-child(2) {
				font-size: 24rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
			}
		}

		.myPages__paymentLeftIcon {
			height: 48rpx;
			width: 48rpx;

		}

		.myPages__paymentLeft {
			flex: 1;
			display: flex;
		}

		.myPages__paymentLRight {
			height: 44rpx;
			width: 44rpx;
			flex: 0 0 44rpx;
		}

		.myPages__remarkBox {
			width: 100%;
			padding: 32rpx;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			.myPages__remarkBoxItems {
				width: 100%;
				padding: 14rpx 0;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
				display: flex;
				justify-content: space-between;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.myPages__remarkRight {
				color: #7B7D8D !important;
			}
		}

		.myPages__remarkBoxs {
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 32rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			align-items: center;
		}

		.myPages__remarkBoxItems {
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.myPages__remarkButtom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 32rpx;
			padding-bottom: 48rpx;
			box-sizing: border-box;
			background-color: #F7F8FC;
			z-index: 9;
		}

		.myPages__remarkBoxssZF {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F44B5B;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			color: #FFFFFF;
			box-sizing: border-box;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.myPages__remarkBoxss {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F44B5B;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			color: #FFFFFF;
			box-sizing: border-box;
		}

		.myPages__stateBoxMainButtom {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			display: flex;
			justify-content: space-evenly;
			padding: 32rpx;
			padding-bottom: 48rpx;
			width: 100%;
			box-sizing: border-box;
			background: #f7f8fc;

			view {
				flex: 1;
				width: 296rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 40rpx;
				text-align: center;
			}

			view:nth-child(2) {
				margin-left: 20rpx;
			}
		}

		.myPages__stateBoxMainButtomTk {
			background-color: #ebebf0;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
		}

		.myPages__stateBoxMainButtomSh {
			background-color: #F44B5B;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #FFFFFF;
		}

	}
</style>
